
<template>

  <div>
    <el-form :inline="true" :model="customer" class="demo-form-inline" style="margin-top: 8px">
      <el-form-item label="">
        <el-input style="width: 150px" v-model="customer.identity" placeholder="身份证号"></el-input>
        <el-input style="width: 150px" v-model="customer.realname" placeholder="姓名"></el-input>
        <el-input style="width: 150px" v-model="customer.address" placeholder="地址"></el-input>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-button type="primary"  @click="tianjia">添加</el-button>
    </el-form>


    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
      <el-table-column
              prop="identity"
              label="身份证号">
      </el-table-column>
      <el-table-column
              prop="custname"
              label="姓名"
      >
      </el-table-column>
      <el-table-column
              prop="sex"
              label="性别">
        <template slot-scope="scope">
          <p v-if="scope.row.sex == 0">男</p>
          <p v-else-if="scope.row.sex == 1">女</p>
        </template>
      </el-table-column>
      <el-table-column
              prop="address"
              label="地址">
      </el-table-column>
      <el-table-column
              prop="phone"
              label="电话号"
      >
      </el-table-column>
      <el-table-column
              prop="career"
              label="职位">
      </el-table-column>
      <el-table-column
              prop="createtime"
              label="创建时间">
      </el-table-column>
      <el-table-column
              width="200px"
              prop=""
              label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="del(scope.row.identity)">删除</el-button>
          <el-button type="success" @click="xiugai(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页条-->

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <el-form ref="Customer" :model="userForm" label-width="80px">
        <el-form-item label="身份证号" prop="identity">
          <el-input v-model="userForm.identity"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="custname">
          <el-input v-model="userForm.custname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="userForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="userForm.address"></el-input>
        </el-form-item>
        <el-form-item label="电话号" prop="phone">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="career">
          <el-input v-model="userForm.career"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createtime">
          <el-date-picker v-model="userForm.createtime" type="date" style="width: 100%" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="gai">确定修改</el-button>
        </span>
    </el-dialog>

    <el-dialog
            title="添加"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
      <el-form ref="Customer" :model="userForm2" label-width="80px">
        <el-form-item label="身份证号" prop="identity">
          <el-input v-model="userForm2.identity"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="custname">
          <el-input v-model="userForm2.custname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="userForm2.sex"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="userForm2.address"></el-input>
        </el-form-item>
        <el-form-item label="电话号" prop="phone">
          <el-input v-model="userForm2.phone"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="career">
          <el-input v-model="userForm2.career"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createtime">
          <el-date-picker v-model="userForm2.createtime" type="date" style="width: 100%" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="tian">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "Customerissues",
    data(){
      return {
        tableData:[],
        dialogVisible:false,
        dialogVisible2:false,
        userForm:{},
        userForm2:{},
        //当前显示的页码
        currentPage:1,
        //总条数
        total:0,
        //每页默认显示条数
        pageSize:5,
        customer:{},

      }
    },
    //页面加载完毕
    created() {
      this.initTable();
    },
    //定义方法得地方
    methods:{
      initTable(){
        this.$http.post("http://localhost:8080/customer/findAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.customer).then(resp=>{
          console.log(resp)
          if(resp.data.code==2000){
            this.tableData=resp.data.data.list;
            this.total=resp.data.data.total;
          }else if (resp.data.code==4001){
            this.$message.error("未登录");
            this.$router.push("/login");
          }

        })
      },
      onSubmit(){
        this.initTable();
      },
      // onSubmit(){
      //     this.$http.post("http://localhost:8080/customer/findAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.customer).then(resp=>{
      //         if(resp.data.code==2000){
      //             this.tableData={};
      //             this.tableData=resp.data.data.list;
      //
      //             this.total=resp.data.data.total;
      //         }else if (resp.data.code==4001){
      //             this.$message.error("未登录");
      //             this.$router.push("/login");
      //         }
      //
      //     })
      //
      // },
      del(identity){
        this.$http.get("http://localhost:8080/customer/delete?identity="+identity).then(resp=>{
          if(resp.data.code==2000){
            this.$message.success("删除成功");
            this.initTable();
          }
        })
      },
      xiugai(row){
        this.dialogVisible=true;
        this.userForm=row;
        this.$http.get("http://localhost:8080/customer/selectAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
          this.customers=resp.data.data.records;

        })

      },
      gai(){
        this.$http.post("http://localhost:8080/customer/update",this.userForm).then(resp=>{
          if (resp.data.code==2000){
            this.$message.success("修改成功")
            this.dialogVisible=false;
            this.initTable();
          }
          this.userForm={};
        })
      },
      tianjia(){
        this.dialogVisible2=true;
      },
      tian(){
        this.$http.post("http://localhost:8080/customer/insert",this.userForm2).then(resp=>{
          if (resp.data.code==2000){
            this.$message.success("添加成功")
            this.dialogVisible2=false;
            this.initTable();
          }
          this.userForm2={};
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
        this.userForm2={};
      },
      resetForm(){
        this.userForm2={};
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this.initTable();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.initTable();
      },

    }
  }
</script>

<style scoped>

</style>
